import { addCategoryClass } from '@/services/ant-design-pro/api';
import { PlusOutlined } from '@ant-design/icons';
import { ActionType, ModalForm, ProFormText, ProFormDigit } from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useRequest } from '@umijs/max';
import { Button, message } from 'antd';
import { FC } from 'react';

interface CreateFormProps {
  reload?: ActionType['reload'];
}

const CreateForm: FC<CreateFormProps> = (props) => {
  const { reload } = props;

  const [messageApi, contextHolder] = message.useMessage();
  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */
  const intl = useIntl();

  const { run, loading } = useRequest(addCategoryClass, {
    manual: true,
    onSuccess: () => {
      messageApi.success('添加成功');
      reload?.();
    },
    onError: () => {
      messageApi.error('添加失败!');
    },
  });

  return (
    <>
      {contextHolder}
      <ModalForm
        title={intl.formatMessage({
          id: 'pages.categoryclass.addForm.title',
          defaultMessage: '添加类别信息',
        })}
        //这里就是新建的按钮
        trigger={
          <Button type="primary" icon={<PlusOutlined />}>
            <FormattedMessage id="pages.new" defaultMessage="新建" />
          </Button>
        }
        width="400px"
        modalProps={{ okButtonProps: { loading } }}
        onFinish={async (value) => {
          await run(value as API.CategoryClassListItem);
          return true;
        }}
      >
         <ProFormDigit
          name="category"
          label={intl.formatMessage({
            id: 'pages.categoryclass.Form.category',
            defaultMessage: '类别号',
          })}
          width="md"
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.category.Form.ruleName.category"
                  defaultMessage="请输入类别号！"
                />
              ),
            },
            //确保输入为整数
            {
              validator: (_, value) => {
                if (value !== undefined && !Number.isInteger(value)) {
                  return Promise.reject(
                    <FormattedMessage
                      id="pages.Form.ruleName.Integer"
                      defaultMessage="请输入整数！"
                    />
                  );
                }
                return Promise.resolve();
              },
            },
          ]}
        />
       
       
        <ProFormText
          name="description"
          label={intl.formatMessage({
            id: 'pages.categoryclass.Form.description',
            defaultMessage: '描述',
          })}
          width="md"
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.categoryclass.Form.ruleName.description"
                  defaultMessage="请输入描述！"
                />
              ),
            },
          ]}
        />
      </ModalForm>
    </>
  );
};

export default CreateForm;
